<template>
	<view>
		<scroll-view class="shopListBox" scroll-y="true" @scrolltolower="lower">
			<view class="shopList" v-for="(item,index) in orderList" :style="index == orderList.length - 1 ? 'border-bottom:0;':''">
				<view class="orderBox">
					<text>订单编号：{{item.order_id}}</text>
					<text style="color:#9e9e9e;">{{item.status_str}}</text>
				</view>
				<view class="timeBox" v-if="item.start_time != ''">下单时间：{{item.start_time}}</view>
				<view class="timeBox" v-else>下单时间：订单已取消,无下单时间</view>
				<image :src="item.pics[0].image" mode="aspectFill"></image>
				<view class="shopContent">
					<view class="shopName">{{item.name}}</view>
					<view class="goodsPrice">
						<text>￥{{item.sell_price}}</text>
						<text style="margin-left:20rpx;">X{{item.num}}</text>
						<text style="color:#FC4C48;font-size:28rpx;margin-left:auto;">实付：￥{{item.amount}}</text>
					</view>
				</view>
				<view class="operationBox" v-if="item.status == 1">
					<text class="t1" @click="refundBtn(item.order_id)">退款</text>
					<text class="t2" @click="goto" :data-url="'/pagesZ/sameCity/writeOff?orderId='+item.order_id">详情</text>
				</view>
				<view class="operationBox" v-if="item.status == 2 && item.is_comment == 0">
					<text class="t2" @click="goto" :data-url="'/pagesZ/sameCity/review?orderId='+item.order_id">评论</text>
				</view>
			</view>
		</scroll-view>
		<loading v-if="loading"></loading>
	</view>
</template>
<script>
	var app = getApp();
	export default {
		data() {
			return {
				loading:false,
				page:1,//当前页
				limit:10,//每页数量
				orderList:[],//订单List
				totalPage:0,//总页数
			}
		},
		
		onShow() {
			this.page = 1;
			this.orderList = [];
			this.getOrderFun();
		},

		methods: {
			//获取订单信息
			getOrderFun(){
				this.loading = true;
				let _this = this;
				app.get('ApiBusinessProduct/getOrderInfo', {page:_this.page,limit:_this.limit}, function (res) {
					_this.loading = false;
					if (res.status == 0) {
						app.alert(res.msg);
						return;
					}else{
						let list = res.data.data;
						_this.totalPage = res.data.last_page;
						list.forEach(item=>{
							_this.orderList.push(item);
						})
					}
				});
			},
			
			//滚动到底部触发事件
			lower(){
				if (this.page < this.totalPage) {
					this.page++;
					this.getOrderFun();
				}
			},
			
			//退款事件
			refundBtn(orderId){
				this.loading = true;
				let _this = this;
				uni.showModal({
					title: '操作提示',
					content: '退款将取消该订单,确认退款吗?',
					success: function(res) {
						if (res.confirm) {
							app.post('ApiBusinessProduct/refund', {order_id:orderId}, function (res) {
								_this.loading = false;
								if (res.status == 0) {
									app.alert(res.msg);
									return;
								}else{
									app.success('订单退款成功！');
									_this.orderList = [];
									_this.page = 1;
									_this.getOrderFun();
								}
							});
						}
					}
				});
				
				
			}
		}
	}
</script>

<style lang="less">
	
	page{
		background-color: #f3f3f3;
	}
	
	.operationBox{
		width:100%;
		float:left;
		display: flex;
		justify-content:flex-end;
		color:#fff;
		margin-top:15rpx;
	}
	
	.operationBox .t1{
		background-color: #9e9e9e;
		border-radius: 5rpx;
		padding:8rpx 40rpx;
	}
	
	.operationBox .t2{
		background-color: #FC4C48;
		margin-left:30rpx;
		border-radius: 5rpx;
		padding:8rpx 40rpx;
	}
	
	.orderBox{
		width:100%;
		float:left;
		font-weight: bold;
		font-size:28rpx;
		display: flex;
		justify-content:space-between;
	}

	.goodsPrice{
		width:100%;
		float:left;
		display: flex;
		align-items: center;
	}
	
	.timeBox{
		width:100%;
		float:left;
		margin:25rpx 0 20rpx 0;
		border-bottom: 1px solid #f7f7f7;
		padding-bottom: 25rpx;
		font-size:26rpx;
	}
	
	.sell{
		background-color: #FC4C48;
		padding:5rpx 20rpx;
		border-radius:7rpx;
		color:#fff;
	}
	
	.unsold{
		background-color: #afafaf;
		padding:5rpx 20rpx;
		border-radius:7rpx;
		color:#fff;
	}
	
	.shopListBox{
		width:94%;
		float: left;
		margin:0 3%;
		height:calc(100vh - 20rpx);
	}
	
	.shopList{
		width:100%;
		float:left;
		background-color: #fff;
		margin-top:25rpx;
		padding:30rpx 3% 25rpx 3%;
		display: flex;
		flex-wrap:wrap;
		align-items: center;
		border-radius:10rpx;
		font-size:28rpx;
	}
	
	.shopAddress{
		width:100%;
		display: flex;
		justify-content:space-between;
	}
	
	.shopAddress view{
		width:80%;
		float:left;
		overflow: hidden; //超出文本隐藏
		text-overflow: ellipsis; //溢出使用省略号显示
		white-space: nowrap; // 默认不换行；
	}
	
	.shopList image{
		width:150rpx;
		height:130rpx;
	}
	
	.shopContent{
		width: calc(100% - 170rpx);
		float:left;
		margin-left:20rpx;
		font-size:26rpx;
		color:#939393;
		line-height: 50rpx;
	}
	
	.shopName{
		font-weight: bold;
		color:#000;
		font-size:28rpx;
	}
	
	.scoreBox{
		display: flex;
		align-items:center;
	}
	
	.scoreBox text{
		padding:3rpx 15rpx;
		background-color: red;
		color:#fff;
		margin-right: 10rpx;
	}
	
	.scoreBox image{
		width:140rpx;
		height:50rpx;
	}
	
	.addGoods {
		width: 90%;
		position: fixed;
		left: 5%;
		bottom: 30rpx;
		line-height: 80rpx;
		background-color: #FC4C48;
		font-weight: bold;
		font-size: 28rpx;
		color: #fff;
		border-radius: 50px;
		text-align: center;
	}
</style>